<!--
 * @Descripttion: 
 * @version: 
 * @Author: Ansel
 * @Date: 2020-03-15 15:49:19
 * @LastEditors: Ansel
 * @LastEditTime: 2020-03-25 19:27:47
 -->
<template>
  <el-card>
    <!-- <div class="project">
      <label for>课程</label>
      <div class="select">CET</div>
      <div class="el-icon-arrow-down icon"></div>
    </div>
    <div class="test">参加考试</div>-->
    <div class="project">
      <!-- <label for>科目</label> -->
      <el-select v-model="subject" placeholder="请选择科目">
        <el-option
          v-for="item in options"
          :key="item.subject"
          :label="item.label"
          :value="item.subject"
        ></el-option>
      </el-select>
    </div>
    <!-- <div class="test">参加考试</div> -->
    <!-- <hr style="opacity:0.3;margin-top:50px" /> -->
    <el-table
      ref="multipleTable"
      tooltip-effect="dark"
      border
      :data="
      tableData"
      style="width: 100%;font-color:black;margin-top:20px"
    >
      <el-table-column label="课程名称" prop="name" sortable></el-table-column>
      <el-table-column label="学习进度" prop="id" sortable></el-table-column>
      <el-table-column label="下载" prop="time" sortable></el-table-column>
      <el-table-column label="选学/必学" prop="status" sortable></el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    ></el-pagination>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          subject: "CET",
          label: "CET"
        }
      ],
      subject:"",
      tableData: [
        {
          name: "监考流程",
          id: "50%",
          time: "已下载",
          status: "必学"
        },
        {
          name: "如何应对监考时意外突发情况",
          id: "75%",
          time: "已下载",
          status: "必学"
        }
      ],
      currentPage: 0,
      pageSize: 10
    };
  },
  mounted() {
    var that = this;
    // axios.get("/subSelectAll").then(res => {
    //   let { code, message, data } = res.data;
    //   // console.log(data);
    //   let len = data.length;
    //   for (let i = 0; i < len; i++) {
    //     let sub = { subject: data[i].subname, label: data[i].subname };
    //     that.options.push(sub);
    //   }
    //   // console.log(that.options[0].subject);
    //   that.subject= that.options.length!=0 ? that.options[0].subject:"";
    // // console.log(that.subject)
    // });
  },
  methods: {
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    handleSizeChange: function(size) {
      this.pageSize = size;
      console.log(this.pageSize); //每页下拉显示数据
    }
  }
};
</script>
<style>
/* thead .cell {
  color: black;
} */
/* .test {
  float: right;
  width: 80px;
  font-size: 18px;
  background-color: red;
  color: white;
  margin-bottom: 20px;
} */
/* .project {
  display: flex;
} */
/* .project .select {
  margin-left: 150px;
  height: 20px;
  width: 500px;
  padding-left: 5px;
  padding-top: 3px;
  align-items: center;
  border: 1px solid #ebeef5;
} */
/* .project .icon {
  border: 1px solid black;
  padding-top: 5px;
} */
/* .page {
  display: flex;
  height: 24px;
  width: 120px;
  text-align: center;
  box-sizing: border-box;
}
.page .last {
  width: 50px;
  box-sizing: border-box;
  border: 1px solid black;
}
.page .thisPage {
  width: 20px;
  color: white;
  text-align: center;
  padding-top: 2px;
  background-color: black;
  box-sizing: border-box;
  border: 1px solid black;
}
.page .next {
  width: 50px;
  box-sizing: border-box;
  border: 1px solid black;
} */
</style>